<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id='ng-app' ng-app="angular-google-maps-example">
<head>
    <meta charset="UTF-8">
    <title>map-type examples for angular-google-maps</title>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,600,300,700'
          rel='stylesheet' type='text/css'>
    <link href="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.css" type="text/css">
    <link href="assets/stylesheets/example.css" rel="stylesheet" type="text/css">
    <style>
        body {
            padding-top: 70px;
            padding-bottom: 30px;
        }

        .angular-google-map-container {
            height: 350px;
        }
    </style>
</head>

<body ng-controller="maptypeExampleController">
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">map-type directive</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#usage">Usage</a></li>
                <li class="dropdown">
                    <a href="#examples" data-toggle="dropdown">Examples <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#basic-overlay">Custom map type overlayed</a></li>
                        <li><a href="#image-overlay">Image map type overlayed</a></li>
                        <li><a href="#image-single">Image map type single layer</a></li>
                        <li><a href="#combo">Combo</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="container">
<div class="jumbotron">
    <h2 ng-cloak><code>map-type</code> directive for <strong>angular-google-maps {{version}}</strong></h2>

    <p>As seen on <a href="https://developers.google.com/maps/documentation/javascript/maptypes">
        Google Maps Javascript API v3 Map Types documentation</a>.</p>
</div>
<h2>Directive usage</h2>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">map-type</h3>
    </div>
    <div class="panel-body">
        <h4>Usage</h4>

        <p>The <code>map-type</code> directive is used to add custom map types, as overlays or single layers.</p>
                <pre class="prettyprint">
&lt;ui-gmap-map-type
    options='{expression}'
    id="'{string}'"
    show='{expression}'
    refresh='{expression}'>
&lt;/ui-gmap-map-type>
                </pre>
        <h4>Parameters</h4>

        <p>Required properties are in red.</p>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>Param</th>
                <th>Type</th>
                <th>Details</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>options</td>
                <td><span class="label label-danger">expression</span></td>
                <td>Map type options, including in particular <code>getTile</code> or <code>getTileUrl</code> methods.
                    For complete list of options see <a
                            href="https://developers.google.com/maps/documentation/javascript/maptypes#MapTypeInterface"
                            target="_blank">Google Maps API documentation</a>.
                </td>
            </tr>
            <tr>
                <td>id</td>
                <td><span class="label label-info">string</span></td>
                <td>Map type id, to be used in the controler to display the maptype as a single layer.</td>
            </tr>
            <tr>
                <td>show</td>
                <td><span class="label label-info">expression</span></td>
                <td>Scope variable used to show the maptype as an overlay. Defaults to <code>true</code>, unless <code>id</code>
                    has been defined
                </td>
            </tr>
            <tr>
                <td>refresh</td>
                <td><span class="label label-info">expression</span></td>
                <td>Variable or expression to watch, which will trigger a maptype refresh when changing.<br>
                    Useful in the case where the <code>getTileUrl</code> is dynamically defined (for example using
                    filters, options&hellip;), and you want to apply changes immediately.
                </td>
            </tr>
            </tbody>
        </table>
    </div>

</div>

<h2>Examples</h2>

<div class="page-header">
    <h3 id="basic-overlay">Map with Custom map type overlayed</h3>
</div>
<div class="row">
    <div class="col-md-6">
        <p>
            The most simple way to overlay a custom map type is just to define the map type options in the controller
            and then add the directive in the google-map widget.
        </p>

        <p>In this example a map type displaying black squares is overlayed on the map. This can be hidden changing the
            <code>showOverlay</code> value in the scope, as seen in <a
                    href="https://developers.google.com/maps/documentation/javascript/examples/maptype-overlay"
                    target="_blank">Overlay map types</a> API example.</p>
        <ui-gmap-google-map center="map1.center" zoom="map1.zoom">
            <ui-gmap-map-type options="squaresMapType" show="map1.showOverlay"></ui-gmap-map-type>
        </ui-gmap-google-map>
        <a class="btn btn-primary" ng-click="map1.showOverlay = !map1.showOverlay">Toggle overlay</a>
    </div>
    <div class="col-md-6">
        <h4>Javascript</h4>
<pre class="prettyprint">
// Define map type options
$scope.squaresMapType = {
    getTile: function(coord, zoom, ownerDocument) {
        var div = ownerDocument.createElement('div');
        div.innerHTML = coord;
        div.style.width = this.tileSize.width + 'px';
        div.style.height = this.tileSize.height + 'px';
        div.style.fontSize = '10';
        div.style.borderStyle = 'solid';
        div.style.borderWidth = '1px';
        div.style.borderColor = '#AAAAAA';
        return div;
    },
    tileSize: new google.maps.Size(256, 256),
    name: 'Black Squares',
    maxZoom: 19,
};

// Define map options
$scope.map1 = {
    center: {
        latitude: 41.850033,
        longitude: -87.6500523
    },
    showOverlay: true,
    zoom: 10,
};
</pre>
        <h4>HTML</h4>
<pre class="prettyprint">
&lt;ui-gmap-google-map center="map1.center" zoom="map1.zoom">
    &lt;ui-gmap-map-type options="squaresMapType" show="map1.showOverlay">&lt;/ui-gmap-map-type>
&lt;/ui-gmap-google-map>
&lt;a ng-click="map1.showOverlay = !map1.showOverlay">Toggle overlay&lt;/a>
</pre>
    </div>
</div>

<div class="page-header">
    <h3 id="image-overlay">Map with Image map type overlayed</h3>
</div>
<div class="row">
    <div class="col-md-6">
        <p>
            You can overlay an Image map type pretty much the same way, just by defining the method
            <code>getTileUrl</code> in its options. MapTypes are handled internally and you don't need to care about
            creating a custom type or using Google API ones.
        </p>

        <p>This example overlays Moscone Center pictures over the map, as seen in <a
                href="https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay"
                target="_blank">Overlaying an image map type</a> API example.</p>

        <ui-gmap-google-map center="map2.center" zoom="map2.zoom" options="map2.options">
            <ui-gmap-map-type options="mosconeCenterMapType"></ui-gmap-map-type>
        </ui-gmap-google-map>
    </div>
    <div class="col-md-6">
        <h4>Javascript</h4>
<pre class="prettyprint">
// Define map type options
$scope.mosconeCenterMapType = {
    getTileUrl: function(coord, zoom) {
        var bounds = {
            17: [[20969, 20970], [50657, 50658]],
            18: [[41939, 41940], [101315, 101317]],
            19: [[83878, 83881], [202631, 202634]],
            20: [[167757, 167763], [405263, 405269]]
        };

        if (zoom < 17 || zoom > 20 ||
            bounds[zoom][0][0] > coord.x || coord.x > bounds[zoom][0][1] ||
            bounds[zoom][1][0] > coord.y || coord.y > bounds[zoom][1][1]) {
            return null;
        }

        return [
            'http://www.gstatic.com/io2010maps/tiles/5/L2_', zoom, '_',
            coord.x, '_', coord.y, '.png'
        ].join('');
    },
    tileSize: new google.maps.Size(256, 256)
};

// Define map options
$scope.map2 = {
    center: {
        latitude: 37.78313383212,
        longitude: -122.4039494991302
    },
    zoom: 18,
    options: {
        minZoom: 17,
        maxZoom: 20
    }
};
</pre>
        <h4>HTML</h4>
<pre class="prettyprint">
&lt;ui-gmap-google-map center="map2.center" zoom="map2.zoom" options="map2.options">
    &lt;ui-gmap-map-type options="mosconeCenterMapType">&lt;/ui-gmap-map-type>
&lt;/ui-gmap-google-map>
</pre>
    </div>
</div>

<div class="page-header">
    <h3 id="image-single">Map with Image map type as single layer</h3>
</div>
<div class="row">
    <div class="col-md-6">
        <p>You can alternatively give the directive an <code>id</code> attribute, so the map type can be used as a
            single layer like the ROAD, SATELLITE or other <a
                    href="https://developers.google.com/maps/documentation/javascript/maptypes#BasicMapTypes"
                    target="_blank">basic map types</a>.</p>
        <ul>
            <li><code>show</code> attribute is not used for single-layer map types, you need to use controls or
                explicitely set the map type you want in the javascript code.
            </li>
            <li>Additionnaly, you need to specify <code>maxZoom</code> parameter in the maptype options when using the
                maptype as a single layer.
            </li>
        </ul>
        <p>This example displays a map of the moon instead of the earth, as seen on <a
                href="https://developers.google.com/maps/documentation/javascript/examples/maptype-image"
                target="_blank">Image map types</a> API example.</p>
        <ui-gmap-google-map center="map3.center" zoom="map3.zoom" options="map3.options">
            <ui-gmap-map-type id="moon" options="moonMapType"></map-type>
        </ui-gmap-google-map>
    </div>
    <div class="col-md-6">
        <h4>Javascript</h4>
<pre class="prettyprint">
// Define map type options.
$scope.moonMapType = {
    getTileUrl: function(coord, zoom) {
        var normalizedCoord = getNormalizedCoord(coord, zoom);
        if (!normalizedCoord) {
            return null;
        }
        var bound = Math.pow(2, zoom);
        return 'http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw' +
            '/' + zoom + '/' + normalizedCoord.x + '/' +
            (bound - normalizedCoord.y - 1) + '.jpg';
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 9, // This attribute is mandatory
    minZoom: 0,
    radius: 1738000,
    name: 'Moon'
};

// Define map options
$scope.map3 = {
    center: {
        latitude: 0,
        longitude: 0
    },
    zoom: 1,
    options: {
        mapTypeId: 'moon',
        mapTypeControlOptions: {
            mapTypeIds: ['moon']
        }
    }
};
</pre>
        <h4>HTML</h4>
<pre class="prettyprint">
&lt;ui-gmap-google-map center="map3.center" zoom="map3.zoom" options="map3.options">
    &lt;ui-gmap-map-type id="moon" options="moonMapType">&lt;/ui-gmap-map-type>
&lt;/ui-gmap-google-map>
</pre>
    </div>
</div>


<div class="page-header">
    <h3 id="combo">Combo : map type overlayed and map type as single layer</h3>
</div>
<div class="row">
    <div class="col-md-6">
        <p>With several <code>map-type</code> directives you can mix custom overlays and single layers, using
            <code>id</code> and <code>show</code> parameters. This is even possible to render the maptype in both ways,
            despite you may not want do this.</p>

        <p>This example features the previously defined "<em>moon</em>" image map type, and "<em>squares</em>" map type.
            One is visible using the controls, the other is overlayed on the map (and can be toggled on/off using <code>show</code>).
        </p>
        <ui-gmap-google-map center="map4.center" zoom="map4.zoom" options="map4.options">
            <ui-gmap-map-type options="squaresMapType"></ui-gmap-map-type>
            <ui-gmap-map-type id="moon" options="moonMapType"></ui-gmap-map-type>
        </ui-gmap-google-map>
    </div>
    <div class="col-md-6">
        <h4>Javascript</h4>
<pre class="prettyprint">
// Previously defined map types are reused

// Define map options
$scope.map4 = {
    center: {
        latitude: 0,
        longitude: 0
    },
    zoom: 3,
    options: {
        mapTypeControlOptions: {
            mapTypeIds: ['moon', google.maps.MapTypeId.ROADMAP]
        }
    }
};
</pre>
        <h4>HTML</h4>
<pre class="prettyprint">
&lt;ui-gmap-google-map center="map4.center" zoom="map4.zoom" options="map4.options">
    &lt;ui-gmap-map-type id="moon" options="moonMapType">&lt;/ui-gmap-map-type>
    &lt;ui-gmap-map-type options="squaresMapType">&lt;/ui-gmap-map-type>
&lt;/ui-gmap-google-map>
</pre>
    </div>
</div>

</div>
<script src="../website_libs/dev_deps.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en&v=3.17"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.min.js" type="text/javascript"></script>
<script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script><script src="../dist/angular-google-maps.js"></script>
<script src="assets/scripts/controllers/overlay-map-type.js"></script>
<script src="assets/scripts/controllers/templates/info.js"></script>
<script src="http://localhost:35729/livereload.js"></script>
</body>

</html>
